 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$Think.config.site.title} - 管家管理</title>
    <meta name="keywords" content="{$Think.config.site.keywords}">
    <link href="{$Think.config.site.resource_url}css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/animate.min.css" rel="stylesheet">
    <link href="{$Think.config.site.resource_url}css/style.min.css?v=4.0.0" rel="stylesheet">
</head>
<style>
ul{margin: 0;padding: 0;}
ul li{list-style: none;}

.clear{clear: both;}
.goods-box{}
.goods-item{
	padding: 15px;
	background: #fff;
	border-bottom: 1px solid #ccc;
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
}
.goods-item:last-child{border: none;}
.goods-check-box{
	margin: 20px 10px
}
.goods-info-box {
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}
.h-box{
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
}
.img-box{width: 20%; float: left; margin-right: 15px; overflow: hidden;} .img-box img{width: 80%;}
.info-box { 
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
	border-bottom: 1px solid #eee
}
.info-box .goodsname{ font-size: 16px; margin-bottom: 15px }
.info-box .xj{ text-align: right; margin:0; padding-right: 10px;}
.info-box .xj span{color: rgb(255, 78, 78)}
.op-box {border-bottom: 1px solid #eee}
.op-box i{ font-size: 22px; color: #1ab394 }

.f-box{
	display:-webkit-box;
	display:-webkit-flex;
	display:flex;
	padding:10px 0;
	align-items: center;
}
.specval_box{
	-webkit-box-flex:1;
	-webkit-flex:1;
	flex:1;
}

.num-box .numbtn{float: left; border: solid 1px #e5e5e5; width: 30px; height:30px; text-align: center; background: #F7F7F7; line-height: 30px; line-height: 26px; font-size: 26px;}
.num-box .numbtn:first-child{border-right: none; border-radius: 5px 0px 0 5px; line-height: 24px; }
.num-box .numbtn:last-child{border-left: none; border-radius: 0px 5px 5px 0}
.numinput{float: left; width: 3em; border: solid 1px #e5e5e5; height: 30px; text-align: center;}
</style>
<body class="gray-bg">
	<div class="mbody">
			{include file='public/userinfo' /}
			<div class="goods-box">
			{volist name="list" id="vo"}
				<div class="goods-item" data-goods_id="{$vo.goods_id}" data-specval_id="{$vo.specval_id}" data-price="{$vo.price}" data-cart_id="{$vo.cart_id}">
					<div class="goods-check-box">
						<input name="ids[]"  type="checkbox" class="i-checks checkitem" value="{$vo.specval_id}">
					</div>
					<div class="goods-info-box">
						<div class="h-box">
							<div class="img-box"><img src="{$vo.picture}"></div>
							<div class="info-box">
								<p class="goodsname">{$vo.goods_name}</p>
								<p class="xj">小计<span>￥{$vo['num']*$vo['price']}</span></p>
							</div>
							<div class="op-box">
								<i class="fa fa-trash-o"></i>
							</div>
						</div>
						<div class="f-box">
							<div class="specval_box">
								{$vo.price}/{$vo.specval_name}({$vo.unit})
							</div>
							<div class="num-box">
								<div class="numbtn reduce">-</div>
								<input type="number" name="" class="numinput" value={$vo.num}>
								<div class="numbtn plus">+</div>
							</div>
						</div>
					</div>
				</div>
			{/volist}
			</div>
	</div>
	<style type="text/css">
		.mbody{position: relative; margin-bottom: 46px;}
		.mfooter{ position: fixed; width: 100%; height: 45px; bottom: 0; left: 0; background: #fff; z-index: 10; }
		.fnav-box{  width: 100%; height: 100%; display:-webkit-box;display:-webkit-flex;display:flex; align-items:center;
}
		.fnav{
			display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
			-webkit-box-flex:1;
			-webkit-flex:1;
			flex:1;
			padding: 0 25px;
		}
		.allcheck{
			-webkit-box-flex:1;
			-webkit-flex:1;
			flex:1;
		}
		.gocart{width: 80px; background: #0dbe08; height: 100%; line-height: 45px; color: #fff; text-align: center; cursor: pointer;}
		.totalprice{color: rgb(255, 78, 78)}
	</style>
	<div class="mfooter">
		<div class="fnav-box">
			<div class="fnav">
				<div class="allcheck">
					<input  type="checkbox" class="i-checks" id="checkall" value=""> 全选
				</div>
				<div class="" >
					总价：<span class="totalprice"></span>
				</div>
			</div>
			<div class="gocart">去结算</div>
		</div>
	</div>
    <script src="{$Think.config.site.resource_url}js/jquery.min.js?v=2.1.4"></script>
    <script src="{$Think.config.site.resource_url}js/bootstrap.min.js?v=3.3.5"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/layer/layer.js"></script>
    <script src="{$Think.config.site.resource_url}js/plugins/iCheck/icheck.min.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/majax.js"></script>
    <script src="{$Think.config.site.common_resource_url}js/jedit.js"></script>
</body>
<style type="text/css">
.mloder_circle{
	font-size: 17px;
    color: #888;
	animation:circle 1s infinite linear;/*匀速 循环*/
	-webkit-animation:circle 1s infinite linear;/*匀速 循环*/
}
	
@-webkit-keyframes circle{
	0%{ transform:rotate(0deg); -webkit-transform:rotate(0deg);}
	100%{ transform:rotate(360deg);  -webkit-transform:rotate(360deg);}
}
.mloder{display: none;}
</style>
</html>
<script>

$('.gocart').click(function(){
	var list = [];
	$("input[name='ids[]']:checked").each(function(index, element) {
		var go = $(this).closest(".goods-item"), specval_id = go.data('specval_id'), num = parseInt(go.find('.numinput').val());
		list.push({specval_id:specval_id,num:num})
	});
	if (list.length>0) {
		window.location.href = "{:url('Cart/payPage',['shop_id'=>$shop_id],'')}?param="+JSON.stringify(list);
	}else{
		layer.msg('未选择商品',{icon:2})
	}
})

$('.fa-trash-o').click(function(){
	var p = $(this).closest('.goods-item'),cart_id = p.data('cart_id');
	majax('{:url("Cart/del",["shop_id"=>$shop_id])}',{cart_id:cart_id},function(d){
		if (d.code>0) {
			p.remove();
			countPrice();
		}
	},{autoload:false,automsg:false});
})

$('body').delegate('.reduce','click',function(){
	var self=this, p = $(self).closest('.num-box'); i = p.find('input'), old_num=i.val(),num = parseInt(old_num)-1;
	if (num < 1 ) {return false; }
	$(self).html('<i class="fa fa-refresh mloder_circle"></i>');
	$(self).removeClass('reduce');
	var go = $(self).closest('.goods-item');
	var goods_id = go.data('goods_id'), specval_id = go.data('specval_id'), price = parseFloat(go.data('price'))
	majax('{:url("Cart/edit",["shop_id"=>$shop_id])}',{specval_id:specval_id,goods_id:goods_id,num:num},function(d){
		$(self).html('-');
		$(self).addClass('reduce');
		if (d.code>0) {
			i.val(num);
			go.find('.xj span').text('￥'+price*num);
			countPrice();
		}
	},{autoload:false,automsg:false});
})

$('body').delegate('.plus','click',function(){
	var self=this, p = $(self).closest('.num-box'); i = p.find('input'), old_num=i.val(),num = parseInt(old_num)+1;
	$(self).html('<i class="fa fa-refresh mloder_circle"></i>');
	$(self).removeClass('plus');
	var go = $(self).closest('.goods-item');
	var goods_id = go.data('goods_id'), specval_id = go.data('specval_id'), price = parseFloat(go.data('price'));
	majax('{:url("Cart/edit",["shop_id"=>$shop_id])}',{specval_id:specval_id,goods_id:goods_id,num:num},function(d){
		$(self).html('+');
		$(self).addClass('plus');
		if (d.code>0) {
			i.val(num);
			go.find('.xj span').text('￥'+price*num);
			countPrice();
		}
	},{autoload:false,automsg:false});
})

function countPrice(){
	var total = 0;
	//计算总价
	$("input[name='ids[]']:checked").each(function(index, element) {
		var go = $(this).closest(".goods-item");
		total += parseFloat(go.data('price'))*parseInt(go.find('.numinput').val());
	});
	$('.totalprice').text(total.toFixed(2));
}

$(function(){
	$(".i-checks").iCheck({checkboxClass:"iradio_square-green",radioClass:"iradio_square-green",});
	
	$(".checkitem").bind("ifChanged",function(){
		countPrice()
	});
	//全选
	$("#checkall").bind("ifChecked",function(){
		$("input[name='ids[]']").iCheck("check");
		countPrice()
	});
	//取消全选
	$("#checkall").bind("ifUnchecked",function(){
		$("input[name='ids[]']").iCheck("uncheck");
		countPrice()
	});

	countPrice()
})
</script>